<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引用Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<link href="../css/zcss/summernote.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-datepicker3.min.css" rel="stylesheet">
<link href="../css/zcss/switchery.min.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-clockpicker.min.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-table.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/bootstrap.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/bootstrap-select.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/core.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/components.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/icons.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/pages.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/responsive.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/sweetalert.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/custombox.min.css" rel="stylesheet">
<link href="../css/zcss/animate.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/css.css" rel="stylesheet" type="text/css">
<style>
.el-select .el-input {
	width: 110px;
}

.el-table .info-row {
	background: #c9e5f5;
}
</style>
</head>
<body class="fixed-left" style="height: 1000px;">
	<!-- ============================================================== -->
	<!-- 右侧主体内容开始-->
	<!-- ============================================================== -->
	<div class="content-page crm" style="margin: 0;">
		<div class="content" style="margin: 0;">
			<div class="container-fluid" style="min-height: 900px;">
				<div class="row">
					<div id="idid" class="col-sm-12">
						<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">

						<!----------------筛选、查询input代码开始-------------------->
						<div id="search">

							<div style="height: 50px; width: 500px; margin: 0 auto;" id="app">


								<el-input placeholder="全部数据" v-model="ruleForm.input"
									class="input-with-select"> <el-select
									v-model="ruleForm.selects" slot="prepend" clearable
									placeholder="请选择"> <el-option label="未处理"
									value="1711"></el-option> <el-option label="已处理" value="1712"></el-option>
								<el-option label="集客" value="1721"></el-option> <el-option
									label="新建" value="1722"></el-option> </el-select> <el-button slot="append"
									icon="el-icon-search" @click="submitForm('ruleForm')"></el-button>

								</el-input>
							</div>
						</div>
						<!----------------列表-------------------->
						<div id="qlist" style="z-index: 0">
							<div id="editqlist"
								style="position: absolute; display: none; &amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; #9; left: 0; &amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; #9; top: 0; width: 0; &amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; #9; height: 0; z-index: 100; background-color: #D4D0C8;">
								<iframe name="editsubqlist" width="1" height="1" src="/a.html"
									frameborder="0" scrolling="no"></iframe>
							</div>
							<div class="row m-t-15 f-s-12" style="height: 35px;">
								<div class="col-sm-6"></div>
								<div class="col-sm-6 text-right" id="boxcreate">
									<el-button class="btn btn-white waves-effect waves-light"
										type="text" @click="centerDialogVisible = true"> <i
										class="fa fa-plus-circle m-

r-5">新建</i> </el-button>
									<el-dialog title="获客线索" :visible.sync="centerDialogVisible"
										width="900px" center> <iframe src="/huoke2"
										width="100%" frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = 
this.contentWindow.document.body.scrollWidth"></iframe>
									</el-dialog>
								</div>
							</div>
						</div>
						<div class="tab-content p-0">
							<div class="bootstrap-table m-t-10">
								<div class="fixed-table-container overflow-x-auto">
									<table class="table table-bordered table-hover table-z"
										id="qlist_table">
										<thead>
											<tr>
												<th class="bs-checkbox" style="width: 36px;">
													<div class="th-inner">
														<input name="selcon"
															onclick='setQlistChk("formedit_qlist",this.checked);'
															type="checkbox" data-parsley-multiple="selcon">
													</div>
													<div class="fht-cell"></div>
												</th>

												<th class="th-inner">
													<p>
														<a class="na"
															href="JavaScript:qlist_argv_orderf='id'; qlist_argv_orderv=0;qlist_load();"
															set-lan="html:ID">ID</a>
													</p>
												</th>
												<th class="th-inner">
													<p align="left">客户名称</p>
												</th>
												<th class="th-inner">
													<p align="left">信用等级</p>
												</th>
												<th class="th-inner">
													<p>
														<a class="na"
															href="JavaScript:qlist_argv_orderf='owner'; qlist_argv_orderv=0;qlist_load();"
															set-lan="html:所有者">所有者</a>
													</p>
												</th>

												<th class="th-inner">
													<p align="left" set-lan="html:地址">地址</p>
												</th>
												<th class="th-inner">
													<p align="left">
														<a class="na"
															href="JavaScript:qlist_argv_orderf='creatdate'; qlist_argv_orderv=0;qlist_load();"
															set-lan="html:创建日期">创建日期</a>
													</p>
												</th>
												<th class="th-inner">
													<p align="left" set-lan="html:">定性</p>
												</th>
												<th class="th-inner">
													<div class="text-center" data-original-title="折行开关"
														data-toggle="tooltip" data-placement="bottom">
														<input id="style_onoff" style="display: none;"
															type="checkbox" checked="" data-size="small"
															data-color="#81c868" data-switchery="true"
															data-plugin="switchery"
															data-parsley-multiple="style_onoff"><span
															class="switchery switchery-small"
															style="border-color: rgb(129, 200, 104); transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; box-shadow: inset 0px 0px 0px 8.5px #81c868; background-color: rgb(129, 200, 104);"><small
															style="transition: background-color 0.4s, left 0.2s; left: 11px; background-color: rgb(255, 255, 255);"></small></span>
													</div>
												</th>
											</tr>
										</thead>
										<tbody class="bg-white">
											
												<tr v-for="(customer,i) in tableData" v-model="tableData">
													<td><input name="sel_id[]" type="checkbox"
														value="2485" data-parsley-multiple="sel_id">{{customer.cusId}}</td>
													<td>
														<p>{{customer.cusId}}</p>
													</td>
													<td>
														<p align="left">{{customer.cusId}}</p>
													</td>
													<td>
														<p align="left">{{customer.cusId}}</p>
													</td>
													<td>
														<p>{{customer.cusId}}</p>
													</td>

													<td>
														<p align="left">
															<br> <input
																onclick='vopen("/sys/map/mapview.xt?cu_id=2485&amp;_show_type=list","newwindow", "height=630, width=900, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, status=no");'
																type="button" value="地图"> <input
																onclick='vopen ("/sys/map/edit.xt?cu_id=2485", "newwindow", "height=630, width=990, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, status=no");'
																type="button" value="打标定位/查看周边客户">
														</p>
													</td>
													<td>
														<p align="left">{{customer.cusId}}</p>
													</td>
													<td>
														<p align="left">{{customer.cusId}}</p>
													</td>
													<td width="1%" nowrap=""><a
														href='JavaScript:qlist_click_todetail(2485,"92f338");'
														data-original-title="视图" data-toggle="tooltip"
														data-placement="bottom"><i
															class="fa fa-file-text-o f-s-16 m-r-5"></i></a>&nbsp; <a
														href='JavaScript:qlist_click_edit(2485,"92f338");'
														data-original-title="编辑" data-toggle="tooltip"
														data-placement="bottom"><i class="fa fa-pencil m-r-5"></i></a>&nbsp;
														<a
														href='JavaScript:qlist_click_del(2485,"customer","92f338");'
														data-original-title="删除" data-toggle="tooltip"
														data-placement="bottom"><i class="fa fa-trash-o m-r-5"></i></a>&nbsp;</td>
												</tr>
										</tbody>
									</table>
								</div>
							</div>

							<div class="row m-t-10">
								<div class="col-sm-3">
									<el-button type="text" @click="centerDialogVisible1 = true"
										icon="el-icon-delete"> </el-button>
									<el-dialog :visible.sync="centerDialogVisible1" width="30%"
										center> <span>确定要删除吗？ </span> <span slot="footer"
										class="dialog-footer"> <el-button
											@click="centerDialogVisible1 = false">取消</el-button> <el-button
											type="primary" @click="centerDialogVisible1 = false">确定</el-button>
									</span> </el-dialog>

									&nbsp;

									<el-button icon="el-icon-edit" type="text"
										@click="centerDialogVisible2 =true"></el-button>

									<el-dialog :visible.sync="centerDialogVisible2" width="900px"
										center> </el-dialog>
								</div>

								<div class="col-sm-7">
									<el-pagination @size-change="handleSizeChange"
										@current-change="handleCurrentChange"
										:current-page="ruleForm.currentPage"
										:page-sizes="[10, 20, 30, 40]" :page-size="ruleForm.pagesize"
										layout="total, sizes, prev, pager, next, jumper"
										:total="ruleForm.totalCount"> </el-pagination>
								</div>

								<div class="col-sm-2 text-right"
									style="text-align: center !important; margin-top: 10px; font-size: 15px; font-weight: bold;">
									<span>获客线索</span> <small class="text-muted font-13">共3条</small>
								</div>
							</div>

						</div>
						</el-form>

					</div>
					<script>
				var vm = new Vue({
					el: "#idid",
					data() {
						return {
							texts: "",
							centerDialogVisible: false,
							centerDialogVisible1: false,
							centerDialogVisible2: false,
							//表格当前页数据
			                tableData: [],
							ruleForm: {
								//搜索框
								input: '',
								//下拉条件按钮
								selects: '',
								 //默认每页数据量
				                pagesize: 5,
				              //当前页码
				                currentPage: 1,
				                //默认数据总数
				                totalCount: 10,
						        }
						}
					},
					methods: {
						//从服务器读取数据
		                loadData: function(pageNum, pageSize){  
		                	
		                	var iosnn=this;
		                	//post提交数据
							axios.post("/customer/customer",
								//参数转换
								Qs.stringify(this.ruleForm, {
									arrayFormat: 'brackets'
								})		
							).then(function(v) {
								iosnn.tableData = v.data;
								
								
								
								/* console.info(v.data); */
							}).catch(function(e) {
								alert("出错了"+e);
							});
		                },
						handleSizeChange(val) {
					        console.log( val+'条');
					      },
					      handleCurrentChange(val) {
					        console.log(val+'当前');
					       
					      },
						submitForm(formName) {
							//验证方法
							this.$refs[formName].validate((valid) => {
								if(valid) {
									this.loadData(this.currentPage, this.pagesize);
								} else {
									console.log('error submit!!');
									return false;
								}
							});
						},
						resetForm(formName) {
							this.$refs[formName].resetFields();
						}
					},
					mounted() {
						var iosnn=this;
						//post提交数据
						axios.post("/customer/customer",
							//参数转换
							Qs.stringify(this.ruleForm, {
								arrayFormat: 'brackets'
							})		
						).then(function(v) {
							iosnn.tableData = v.data;
							/* console.info(v.data); */
						}).catch(function(e) {
							alert("出错了"+e);
						});
					}
					
				});
			</script>


				</div>
				<!----------------统计-------------------->
				<div>
					<a href="/xcrm/desktop/telnote/">2017.10前的网客线索</a>
				</div>
			</div>
		</div>
	</div>
</body>
<!--UTF8-->
</html>
